<!DOCTYPE html> 
<html> 
 	<head> 
 		<title>轮播</title> 
 		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.css"> 
 		<script src="public/js/jquery-3.2.1.min.js"></script> 
		<script src="public/bootstrap/js/bootstrap.min.js"></script> 
 		<style> 
 			#circleContent{ 
 				width:150px; 
				height:150px; 
 			} 
		</style> 
		<script> 
			$(document).ready(function(){ 
				$('#circleContent').carousel({interval:5000});//每隔5秒自动轮播 
			}); 
		</script> 
 	</head> 
 	<body> 
 		<div id="circleContent" class="carousel slide"> 
 			<ol class="carousel-indicators"> 
 				<li data-target="#circleContent" data-slide-to="0" class="active"></li> 
 				<li data-target="#circleContent" data-slide-to="1"></li> 
 				<li data-target="#circleContent" data-slide-to="2"></li> 
 			</ol> 
 		<div class="carousel-inner"> 
 			<div class="item active"> 
  			<img src="images/circle1.png"> 
  <div class="carousel-caption">IMG1</div> 
 </div> 
 <div class="item"> 
  <img src="images/circle2.png"> 
  <div class="carousel-caption">IMG2</div> 
 </div> 
 <div class="item"> 
  <img src="images/circle3.png"> 
  <div class="carousel-caption">IMG3</div> 
 </div> 
 </div> 
 <a class="carousel-control left" href="#circleContent" data-slide="prevent">‹</a> 
 <a class="carousel-control right" href="#circleContent" data-slide="next">›</a> 
 </div> 
 </body> 
</html>